<!--
  Copyright (c) chb my copyright message. 2022-2023. All rights reserved.

  -->

<template>
  <div>
    <!--  顶部标签  -->
    <van-nav-bar title="歌单广场">
      <template #left>
        <van-icon name="zuojiantou" class-prefix="iconfont" size="28px" @click="$router.back()"></van-icon>
      </template>
      <template #right>
        <van-icon name="gengduo" class-prefix="iconfont" size="20px" @click="$router.push('catTabs')" style="background: transparent" color="#d81e06"></van-icon>
      </template>
    </van-nav-bar>
    <div>
      <van-tabs @click="changeTabs" v-model="tabs" animated >

        <van-tab :title="item.name" v-for="(item,index) in hotList" :key="index">
          <!--    hi，快来听听      -->
          <div>
            <van-cell>
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <van-icon size="16px" name="replay" style="font-weight: 800;" @click="getTopPlayList">Hi {{
                    nickname
                  }}，快来听听
                </van-icon>
              </template>
            </van-cell>
            <div style="display: flex;flex-wrap: wrap;">
              <div v-for="(items,indexx) in 6" :key="indexx"
                   style="width: 110px;margin: 6px 6px 0 6px"
                   @click="$router.push({name:'playlistDetail',query:{id:totalList[indexx].id}})">
                <div style="position: absolute;margin-left: 50px" v-if="totalList[indexx]">
                  <van-tag color="#494949">
                    <van-icon name="bofang" class-prefix="iconfont" size="8">
                      {{ totalList[indexx].trackCount }}万
                    </van-icon>

                  </van-tag>
                </div>
                <div v-if="totalList[indexx]">
                  <img :src="totalList[indexx].coverImgUrl" style="width: 110px;height: 110px;border-radius: 15px"
                       alt=""/>
                </div>
                <div v-if="totalList[indexx]"
                     style="display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis">
                  {{ totalList[indexx].name }}
                </div>
              </div>
            </div>
          </div>
          <!--    今日编辑推荐      -->
          <div>
            <van-cell title="今日编辑推荐" size="large" style="font-weight: 800;"></van-cell>
            <van-swipe :loop="false" :width="120" :show-indicators="false">
              <van-swipe-item v-for="(items,indexx) in 6" :key="indexx"
                              @click="$router.push({name:'playlistDetail',query:{id:totalList[indexx+6].id}})">
                <div style="width: 110px;margin: 6px 6px 0 6px">
                  <div style="position: absolute;margin-left: 50px" v-if="totalList[indexx+6]">
                    <van-tag color="#494949">
                      <van-icon name="bofang" class-prefix="iconfont" size="8">
                        {{ totalList[indexx + 6].trackCount }}万
                      </van-icon>
                    </van-tag>
                  </div>
                  <div v-if="totalList[indexx+6]">
                    <img :src="totalList[indexx+6].coverImgUrl" style="width: 110px;height: 110px;border-radius: 15px"
                         alt=""/>
                  </div>
                  <div v-if="totalList[indexx+6]"
                       style="display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis">
                    {{ totalList[indexx + 6].name }}
                  </div>
                </div>
              </van-swipe-item>
            </van-swipe>
          </div>

          <!--    为你定制的官方歌单      -->
          <div>
            <van-cell title="为你定制的官方歌单" size="large" style="font-weight: 800;"></van-cell>
            <van-swipe :loop="false" :width="120" :show-indicators="false">
              <van-swipe-item v-for="(items,indexx) in 6" :key="indexx"
                              @click="$router.push({name:'playlistDetail',query:{id:totalList[indexx+12].id}})">
                <div style="width: 110px;margin: 6px 6px 0 6px">
                  <div style="position: absolute;margin-left: 50px" v-if="totalList[indexx+12]">
                    <van-tag color="#494949">
                      <van-icon name="bofang" class-prefix="iconfont" size="8">
                        {{ totalList[indexx + 12].trackCount }}万
                      </van-icon>
                    </van-tag>
                  </div>
                  <div v-if="totalList[indexx+12]">
                    <img :src="totalList[indexx+12].coverImgUrl" style="width: 110px;height: 110px;border-radius: 15px"
                         alt=""/>
                  </div>
                  <div v-if="totalList[indexx+12]"
                       style="display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis">
                    {{ totalList[indexx + 12].name }}
                  </div>
                </div>

              </van-swipe-item>
            </van-swipe>
          </div>
          <!--    这些歌单，正合你意      -->
          <div>
            <van-cell title="这些歌单，正合你意" size="large" style="font-weight: 800"></van-cell>
            <div style="display: flex;flex-wrap: wrap;">
              <div v-for="(items,indexx) in 9" :key="indexx"
                   @click="$router.push({name:'playlistDetail',query:{id:totalList[indexx+18].id}})"
                   style="width: 110px;margin: 6px 6px 0 6px">
                <div style="position: absolute;margin-left: 50px" v-if="totalList[indexx+18]">
                  <van-tag color="#494949">
                    <van-icon name="bofang" class-prefix="iconfont" size="8">
                      {{ totalList[indexx].trackCount }}万
                    </van-icon>
                  </van-tag>
                </div>
                <div v-if="totalList[indexx+18]">
                  <img :src="totalList[indexx+18].coverImgUrl" style="width: 110px;height: 110px;border-radius: 15px"
                       alt=""/>
                </div>
                <div v-if="totalList[indexx+18]"
                     style="display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis">
                  {{ totalList[indexx + 18].name }}
                </div>
              </div>
            </div>
          </div>
          <van-divider dashed>暂无更多歌单</van-divider>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {getPlayListCatlist, getPlayListHot, getTopPlayList} from "../../api/playlist";
import {getUserAccount} from "../../api/user";
import router from "../../router";

export default {
  name: "catList",
  data() {
    return {
      hotList: {},
      totalList: [
        {
          coverImgUrl: ''
        }
      ],
      nickname: '',
      tabs: 0
    }
  },
  created() {
    this.init()

  },
  methods: {
    router() {
      return router
    },
    init() {
      getUserAccount().then(res => { //获取用户信息
        this.nickname = res.data.profile.nickname
      })

      getPlayListHot().then(res => {
        this.hotList = res.data.tags
      })
      getTopPlayList().then(res => {
        this.totalList = res.data.playlists
      })
    },
    getTopPlayList(item) {
      getTopPlayList(item).then(res => {
        this.totalList = res.data.playlists
      })
    },
    // 切换歌单时
    changeTabs(name, title) {
      this.getTopPlayList(title)
    }
  }
}
</script>

<style scoped>

</style>
